<template>
  <view class="box" v-for="item in comment_list" :key="item.id">
    <view class="user_info">
      <image
      class="info_img"
      :src="item.user_img"
        mode="scaleToFill"
      />
      <view class="info_text">
        <view class="info_name">{{item.user_name}}</view>
        <view class="info_date">{{item.create_date}}</view>
        
      </view>
    </view>
    <uni-rate
        v-model="item.star"
        isFill="false"
        readonly="true"
        margin="17px"
        />
    <view class="comment_content">{{item.comment}}</view>
    <view class="comment_img" v-if="item.is_img">
        <view class="box_img" v-for="index in item.url_list" :key="index.id">
          <image
          class="co_img"
          :src="index.url" @click="Ontap(index.url,item.url_list)"
            mode="scaleToFill"
          />
        </view>
      
        </view>
  </view>	
<view class="bottom_matron">
	<view class="matron_info">
		<image class="matron_img" src="/static/logo.png"></image>
		<view class="matron_name">王大发</view>
	</view>
	<button class="butt">查看档期</button>
</view>

</template>

<script setup lang="ts">
	import Canvas from '/src/components/Canvas.vue'
import { ref ,defineProps} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {http} from '@/utlis/http.ts'
const Post=defineProps({
comment_str:String
})
const comment_list=ref([JSON.parse(querys.order)]) 

</script>
<style lang="scss">
	.bottom_matron{
		width: 100%;
			height: 150rpx;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0px;
		
		border-top: 0.5px solid rgba(0, 0, 0, 0.3);
		.matron_info{
		
			flex-grow: 1;
			display: flex;
			align-items: center;
			color: rgba(0, 0, 0, 0.7);
			font-size: 18px;
			font-weight: 600;
			.matron_img{
				width: 60px;
				height: 60px;
				border-radius: 50%;
				margin: 6px;
				margin-left: 10px;
			}
			.matron_name{
				margin: 6px;
			}
		}
		.butt{
			flex-grow: 0.6;
			margin: 10px;
			height: 120rpx;
			width: 150px;
			font-size: 20px;
			line-height: 120rpx;
			color: aliceblue;
			border-radius: 15px;
			background-color: rgba(34, 219, 126, 0.7);
		}
	}
	page{
		background-color: rgba(0, 0, 0, 0.05);
	}
.box{

	margin: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
	.user_info{
		width: 100%;
		display: flex;
		margin-bottom: 3px;
		align-items: center;
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
		.info_img{
			width: 45px;
			height: 45px;
			border-radius: 50%;
			margin: 5px;
		}
		.info_text{
			font-size: 12px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.9);

			.info_name{
				margin: 5px;
			}
			.info_date{
				margin: 5px;
				font-weight: 600;
				font-size: 10px;
				color: rgba(0, 0, 0, 0.6);
			}
		}
		
	}
	.comment_content{
		
	
	margin: 5px;
	font-size: 14px;
	/* font-weight: 600; */
	line-height: 17px;
	color: rgba(0, 0, 0, 0.6);
	
	letter-spacing: 0.12em;
	}
	.comment_img{
		width: 100%;
		margin: 5px;
		padding-bottom: 6px;
		display: flex;
		flex-wrap: wrap;
		.box_img{
			width: 220rpx;
			height: 220rpx;
			margin: 5px;
			overflow: hidden;
			border-radius: 10px;
			.co_img{
				width: 100%;
			}
		}
		
	}
}
</style>
